<template>
  <div>
    <div style="display: flex">
      <a-input-search @search="search" v-model="dictName" style="flex: 1" placeholder="请输入名称"/>
      <a-button type="primary" style="margin-left: 5px" icon="search" @click="search">搜索</a-button>
    </div>
    <div style="padding-top: 10px">
      <HTable ref="table" @pageChange="pageChange" @selectChange="selectChange"
              :dataSource="dataSource" :pagination="pagination" select="single"
              :configurable="false" size="small" :columns="columns">
        <template slot="action" slot-scope="text, record, index">
          <a style="user-select:none;" @click.stop="() => openDictContent(record)">查看</a>
        </template>
      </HTable>
    </div>

    <SystemDictDetailModal ref="SystemDictDetailModal"/>
  </div>
</template>
<script>
import HTable from '@comp/hhd/HTable/HTable.vue';
import {createPagination} from '@/utils';
import {getAction} from '@api/manage';
import SystemDictDetailModal from '@comp/hhd/design/FormDesigner/DictBinder/SystemDictDetailModal.vue';

export default {
  name: 'SystemDictSelector',
  components: {SystemDictDetailModal, HTable},
  data() {
    return {
      columns,
      dictName: undefined,
      dataSource: [],
      selectRows: [],
      pagination: createPagination(),
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.pagination = createPagination();
      this.dataSource = [];
      this.dictName = undefined;
      this.selectRows = []
      this.$nextTick(() => {
        this.$refs.table.clearSelection();
      })
      this.search();
    },
    getData() {
      let data = this.selectRows && this.selectRows.length && this.selectRows[0] || undefined;
      if(data) {
        return {
          dict: data.dictCode,
          dictType: 'system'
        }
      }
    },
    selectChange({selectRows}) {
      this.selectRows = selectRows
    },
    openDictContent(record) {
      this.$refs.SystemDictDetailModal.setData(record)
    },
    search(reset = true) {
      reset && (this.pagination.current = 1);
      getAction('/sys/dict/list', {
        dictName: this.searchDictName,
        pageSize: this.pagination.pageSize,
        pageNo: this.pagination.current
      }).then(({result}) => {
        this.dataSource = result.records;
        this.pagination.total = result.total;
      });
    },
    pageChange({pagination, loaded}) {
      this.pagination.current = pagination.current;
      this.$nextTick(() => {
        this.search(false);
      })
    },
  },
  computed: {
    searchDictName() {
      return this.dictName && `*${this.dictName}*` || undefined;
    },
  }
};
const columns = [
  {
    title: '字典编码',
    dataIndex: 'dictCode',
  },
  {
    title: '字典名称',
    dataIndex: 'dictName',
  },
  {
    title: '描述',
    dataIndex: 'description',
  }
];
</script>